<template>
  <div class="app-container">
    <!-- 卡片 -->
    <el-card class="tree-card" shadow="hover">
      <!--头部-->
      <TreeItems :company-name="companyName" :type="2" />
      <hr />

      <!-- 内容部分 -->
      <!-- 树状图 -->
      <el-tree
        :highlight-current="true"
        :data="departs"
        :default-expand-all="true"
        class="custom-tree"
        :expand-on-click-node="false"
      >
        <template #default="{data}">
          <TreeItems :data="data" @reload="getDepartmentFn" />
        </template>
      </el-tree>
    </el-card>
    <!-- 弹出层 -->
    <AddDept :all-departments="allDepartments" @reload="getDepartmentFn" />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import TreeItems from './components/tree-items.vue'
import AddDept from './components/add-dept.vue'
import { getDepartmentAPI } from '@/api/departments'
import { formatTree } from '@/utils/tree'
import { IDeparts } from '@/model/interface/departments'

@Component({ name: 'departments', components: { TreeItems, AddDept } })
export default class extends Vue {
  /*
    ! data
  */
  departs: Array<IDeparts> = [] // 部门数据结构
  companyName = '' // 公司名
  allDepartments: Array<IDeparts> = []

  created() {
    this.getDepartmentFn()
  }

  private async getDepartmentFn() {
    const { depts, companyName } = await getDepartmentAPI()
    this.allDepartments = depts
    this.companyName = companyName
    this.departs = formatTree(depts, '')
  }
}
</script>

<style scoped lang="scss">
.tree-card {
  font-size: 14px;
}
.potion {
  cursor: pointer;
}
.custom-tree {
  width: 100%;
}
</style>
